import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:groovin_material_icons/groovin_material_icons.dart';
import 'package:jtsell_app/config/app_config.dart';
import 'package:jtsell_app/routes/routes.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final _formKey = GlobalKey<FormState>();
  String _email, _password,_repassword;
  bool _isObscure = true, _isReObscure = true;
  Color _eyeColor, _eyeReColor;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Form(
            key: _formKey,
            child: ListView(
              padding: EdgeInsets.symmetric(horizontal: 22.0),
              children: <Widget>[
                SizedBox(
                  height: kToolbarHeight,
                ),
                buildTitle(),
                //buildTitleLine(),
                SizedBox(height: 70.0),
                buildEmailTextField(),
                SizedBox(height: 30.0),
                buildPasswordTextField(context),
                SizedBox(height: 30.0),
                buildRePasswordTextField(context),
                buildForgetPasswordText(context),
                SizedBox(height: 60.0),
                buildLoginButton(context),
                SizedBox(height: 30.0),
              ],
            )));
  }

  ///
  /// 注册
  ///
  Align buildLoginButton(BuildContext context) {
    return Align(
      child: SizedBox(
        height: 45.0,
        width: 270.0,
        child: RaisedButton(
          child: Text(
            '注册',
            style: Theme.of(context).primaryTextTheme.headline,
          ),
          color: AppConfig.THEME_COLOR,
          onPressed: () {
            _formKey.currentState.save();

            if (_formKey.currentState.validate()) {
              ///只有输入的内容符合要求通过才会到达此处



            }
          },
          shape: StadiumBorder(side: BorderSide(color: Colors.white, width: 0.5)),
        ),
      ),
    );
  }

  ///
  /// 已有账号
  ///
  Padding buildForgetPasswordText(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 8.0),
      child: Align(
        alignment: Alignment.centerRight,
        child: FlatButton(
          child: Text(
            '已有账号',
            style: TextStyle(fontSize: 14.0, color: Colors.grey),
          ),
          onPressed: () {
            Routes.getInstance().loginPage(context).then((res) {
              Navigator.pop(context);
            });
          },
        ),
      ),
    );
  }

  ///
  /// 重复密码
  ///
  TextFormField buildRePasswordTextField(BuildContext context) {
    return TextFormField(
      onSaved: (String value) => _repassword = value,
      obscureText: _isReObscure,
      validator: (String value) {
        if (value.isEmpty) {
          return '请输入密码';
        }
        else if(value != _password){
          return "两次输入密码不一致";
        }
        else{
          return null;
        }
      },
      inputFormatters: [
        WhitelistingTextInputFormatter(RegExp("[a-z,A-Z,0-9]")), //限制只允许输入字母和数字
//                    WhitelistingTextInputFormatter.digitsOnly,                //限制只允许输入数字
//                    LengthLimitingTextInputFormatter(8),                      //限制输入长度不超过8位
      ],
      decoration: InputDecoration(
          labelText: '重复密码',
          suffixIcon: IconButton(
              icon: Icon(
                Icons.remove_red_eye,
                color: _eyeReColor,
              ),
              onPressed: () {
                setState(() {
                  _isReObscure = !_isReObscure;
                  _eyeReColor = _isReObscure ? Colors.grey : AppConfig.THEME_COLOR;
                });
              })),
    );
  }

  ///
  /// 密码框
  ///
  TextFormField buildPasswordTextField(BuildContext context) {
    return TextFormField(
      onSaved: (String value) => _password = value,
      obscureText: _isObscure,
      validator: (String value) {
        if (value.isEmpty) {
          return '请输入密码';
        }
      },
      inputFormatters: [
        WhitelistingTextInputFormatter(RegExp("[a-z,A-Z,0-9]")), //限制只允许输入字母和数字
//                    WhitelistingTextInputFormatter.digitsOnly,                //限制只允许输入数字
//                    LengthLimitingTextInputFormatter(8),                      //限制输入长度不超过8位
      ],
      decoration: InputDecoration(
          labelText: '密码',
          suffixIcon: IconButton(
              icon: Icon(
                Icons.remove_red_eye,
                color: _eyeColor,
              ),
              onPressed: () {
                setState(() {
                  _isObscure = !_isObscure;
                  _eyeColor = _isObscure ? Colors.grey : AppConfig.THEME_COLOR;
                });
              })),
    );
  }

  ///
  /// 用户名
  ///
  TextFormField buildEmailTextField() {
    return TextFormField(
      decoration: InputDecoration(
        labelText: '账号',
      ),
      inputFormatters: [
        WhitelistingTextInputFormatter(RegExp("[a-z,A-Z,0-9]")), //限制只允许输入字母和数字
//                    WhitelistingTextInputFormatter.digitsOnly,                //限制只允许输入数字
//                    LengthLimitingTextInputFormatter(8),                      //限制输入长度不超过8位
      ],
      validator: (String value) {
//        var emailReg = RegExp(
//            r"[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?");
//        if (!emailReg.hasMatch(value)) {
//          return '请输入正确的邮箱地址';
//        }
        if (value == null || value.isEmpty) {
          return "账号不能为空";
        }
      },
      onSaved: (String value) => _email = value,
    );
  }

  Padding buildTitleLine() {
    return Padding(
      padding: EdgeInsets.only(left: 12.0, top: 4.0),
      child: Align(
        alignment: Alignment.bottomLeft,
        child: Container(
          color: Colors.black,
          width: 40.0,
          height: 2.0,
        ),
      ),
    );
  }

  Widget buildTitle() {
    return Center(
      child: Text(
        '用户注册',
        style: TextStyle(fontSize: 30.0, color: AppConfig.THEME_COLOR),
      ),
    );
  }
}
